<template>
  <!-- 添加活动卡片页面 -->
  <view class="main">
    <view style="height: 2rpx; background-color: #eeeeee"></view>
    <!-- 无活动展示 -->
    <view class="wu_Huo" v-if="activityList.length == 0">
      <image src="../../imges/wuHuoD.png" mode="aspectFill"></image>
      <text>暂无活动</text>
    </view>
    <!-- 活动展示 -->
    <view class="active" v-if="activityList.length > 0">
      <view
        class="card"
        v-for="(item, index) in activityList"
        @tap="handleChoose(index, item.id)"
      >
        <image class="datu" :src="item.actPoster" mode="aspectFill"></image>
        <view class="text">
          <view class="title">
            {{ item.topic }}
          </view>
          <view class="message">
            <view class="left">
              <image src="../../imges/time.png" mode="aspectFill"></image>
              <text class="time">{{ item.actStartTime }}</text>
              <image src="../../imges/adress.png" mode="aspectFill"></image>
              <text>{{ item.actAddress }}</text>
            </view>
            <view class="right">
              <image
                src="../../imges/weixuan.png"
                mode="aspectFill"
                v-if="!item.is_show"
              ></image>
              <image
                src="../../imges/xuanzhong1.png"
                mode="aspectFill"
                class="choose"
                v-if="item.is_show"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btn_bottom" v-if="activityList.length > 0">
      <view @click="handleBtn" class="btn"> 确定 </view>
    </view>
  </view>
</template>
<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      activityList: [], //活动列表
      pageSize: 10,
      bottom: false,
      is_show: false,
    };
  },
  onLoad() {
    this.handleList();
  },
  onShow() {},
  onReachBottom() {
    this.bottom = true;
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    this.handleList();
  },
  onPullDownRefresh() {
    this.pageSize = 10;
    this.handleList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  methods: {
    handleList() {
      //活动列表
      // 后台请求
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/actManage/myCreate",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: 1,
            pageSize: this.pageSize,
            id: "",
          },
        }).then((res) => {
          if (res.data.code == 200) {
            // console.log('活动列表',res)

            res.data.data.rows.map((v) => {
              v.is_show = false;
            });
            this.activityList = res.data.data.rows;

            if (uni.getStorageSync("activity")) {
              //编辑赋值
              let activityID = uni.getStorageSync("activity")[0].id;
              this.activityList.forEach((v, i) => {
                if (v.id == activityID) {
                  this.activityList[i].is_show = true;
                }
              });
            }

            if (this.bottom && this.activityList.length > 0) {
              if (this.activityList.length < res.data.data.total) {
                uni.hideLoading();
                uni.showToast({
                  title: "加载完成",
                  duration: 1500,
                  icon: "none",
                });
              } else if (this.activityList.length >= res.data.data.total) {
                uni.hideLoading();
                uni.showToast({
                  title: "没有更多数据了",
                  duration: 1500,
                  icon: "none",
                });
              }
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleBtn() {
      //点击确定
      let activity = this.activityList.filter((v) => {
        return v.is_show == true;
      });
      if (activity.length == 0) {
        uni.showToast({
          title: "请选择活动卡片",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      uni.setStorageSync("activity", activity);
      uni.showToast({
        title: "添加活动卡片成功",
        duration: 1000,
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 1000);
    },
    quMask() {
      this.is_mask = false;
    },
    handleChoose(index, id) {
      this.activityList.filter((v) => {
        v.is_show = false;
      });
      this.activityList[index].is_show = true;
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}

.zheZhao {
  position: fixed;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;

  .modal {
    position: relative;
    background-color: #fff;
    border-radius: 8rpx;
    width: 520rpx;
    height: 300rpx;
    box-sizing: border-box;
    padding-top: 30rpx;

    .header {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
    }

    .text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(49, 49, 49, 1);
      width: 100%;
      text-align: center;
      margin-top: 30rpx;
    }

    .btn_ {
      position: absolute;
      bottom: 0;
      height: 85rpx;
      border-top: 2rpx solid #eee;
      width: 100%;
      display: flex;

      view {
        box-sizing: border-box;
        width: 50%;
        height: 85rpx;
        line-height: 85rpx;
        text-align: center;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.4);

        .right {
          width: 100%;
          height: 100%;
        }
      }

      .left {
        border-right: 2rpx solid #eee;
      }
    }
  }
}

.main {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .wu_Huo {
    margin-top: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 600rpx;
      height: 420rpx;
    }

    text {
      display: inline-block;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
      position: relative;
      top: -90rpx;
    }
  }
}

.active {
  padding: 30rpx 32rpx;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 120rpx;

  .card {
    width: 686rpx;
    height: 380rpx;
    position: relative;
    margin-bottom: 20rpx;

    .datu {
      width: 686rpx;
      height: 380rpx;
      border-radius: 8rpx;
    }
    .text {
      width: 100%;
      height: 150rpx;
      position: absolute;
      bottom: 0rpx;
      left: 0;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 23rpx;
      box-sizing: border-box;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.9) 100%
      );
      opacity: 0.9;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(255, 255, 255, 0.1);

      .title {
        font-size: 34rpx;
        font-weight: bold;
        // margin-top: 10rpx;
        margin-bottom: -6rpx;
      }

      .message {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25rpx;
        box-sizing: border-box;

        .left {
          display: flex;
          align-items: center;

          image {
            width: 26rpx;
            height: 26rpx;
            margin-right: 9rpx;
          }

          text {
            font-size: 24rpx;
          }

          .time {
            margin-right: 40rpx;
          }
        }

        .right {
          width: 36rpx;
          height: 36rpx;
          display: flex;
          align-items: center;

          image {
            width: 100%;
            height: 100%;
            opacity: 0.6;
          }

          .choose {
            width: 100%;
            height: 100%;
            opacity: 1;
          }
        }
      }
    }
  }
}

.btn_bottom {
  border-top: 2rpx solid #eee;
  padding-top: 18rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 120rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;

  .btn {
    width: 686rpx;
    height: 74rpx;
    background: rgba(33, 104, 235, 1);
    border-radius: 46rpx;
    margin: 0 auto;
    line-height: 74rpx;
    text-align: center;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
